<%
layout("/include/_dialog.html"){
%>
<link href="${ctxStatic}/plugins/layui/dist/css/manager.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
    $(document).ready(function () {
        refreshMembers();
    });


    function refreshMembers() {
        jp.get("${ctx}/layim/layGroup/memberData?id=${layGroup.id!}", function (data) {
            var memberTpl = $('#memberTpl').html(); //读取模版
            laytpl(memberTpl).render(data, function (render) {
                $("#group-members-view").html(render);
            });

        })
    }

    function addMemberToGroup() {
        jp.openUserSelectDialog(true, function (ids) {
            jp.get("${ctx}/layim/layGroup/addUser?ids=" + ids + "&groupid=${layGroup.id!}", function (result) {
                if (result.success) {
                    refreshMembers()
                    jp.success(result.msg);
                }
            })
        });
    };

    function delFromGroup(id) {
        jp.get("${ctx}/layim/layGroup/logout?user.id=" + id + "&group.id=${layGroup.id!}", function (data) {
            if (data.success) {
                refreshMembers()
                jp.success(data.msg);
            }
        })
    }


</script>

<div class=" animated fadeInRight">
    <div class="row" id="group-members-view">
    </div>
</div>

<script id="memberTpl" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}
    <div class="col-xs-2">
        <div class="contact-box">
            <a href="#">
                <div class="text-center photo">
                    <img alt="image" class="img-circle m-t-xs img-responsive"
                         src="{{# if(d[i].user.photo != ''){ }}{{  d[i].user.photo }}{{# }else{ }}${ctxStatic}/common/images/flat-avatar.png {{# } }}"/>
                    <h5>{{ d[i].user.name }}</h5>
                </div>
            </a>
        </div>
    </div>
    {{# } }}
</script>

<% } %>